<template>
  <div class="progressQuery">
    <NavBar pageTit="保障申请审核" :needPhoneTop="false"></NavBar>
    <div class="page-content">
      <div class="info-card">
        <img class="card-bg" src="@/assets/img/chaxun.png" alt="" />
        <div class="people-info">
          <div class="title-status">
            <p class="title">保障申请审核</p>
            <p class="status">当前状态：未受理</p>
          </div>
          <p class="general-information">受理编号：54515427</p>
          <p class="general-information">申请人：张三</p>
          <p class="general-information">申请日期：{{ applicantDate }}</p>
        </div>
      </div>

      <div class="progress-details">
        <div class="progress-title">
          <div class="title">进度详情</div>
          <div class="more-box" @click.prevent="handleMoreBtn">
            <img src="@/assets/img/dian.png" alt="" />
          </div>
          <div class="btn-content" v-if="btnShow">
            <div class="btn view-detail">查看详情</div>
            <div class="btn withdraw">撤回申请</div>
          </div>
        </div>
        <div class="progress-content">
          <div class="progress">
            <div class="progress-left">
              <img class="status-dian" src="@/assets/img/dui.png" alt="" />
              <img class="progress-line" src="@/assets/img/shu.png" alt="" />
            </div>
            <div class="progress-right">
              <p class="progress-status">提交成功</p>
              <p class="progress-date">{{ submitDate }}</p>
            </div>
          </div>
          <div class="progress">
            <div class="progress-left">
              <div class="status-quan">
                <div class="nei-quan"></div>
              </div>
            </div>
            <div class="progress-right">
              <p class="progress-status">审核资料</p>
              <p class="progress-tip">资料开始审核后不可撤回申请</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "./../components/navBar";
import dayjs from "dayjs";

export default {
  name: "progressQuery",
  components: {
    NavBar,
  },
  data() {
    return {
      applicantDate: dayjs(new Date()).format("YYYY/MM/DD"),
      submitDate: dayjs(new Date()).format("YYYY/MM/DD hh:mm:ss"),
      btnShow: false,
    };
  },
  methods: {
    handleMoreBtn() {
      this.btnShow = !this.btnShow;
    },
  },
};
</script>

<style scoped>
#app {
  font-size: 0;
}
p {
  margin: 0;
}

.page-content {
  width: 100%;
  box-sizing: border-box;
  padding: 0 0.15rem;
  font-size: 0.16rem;
}

.info-card {
  width: 100%;
  height: 1.4rem;
  position: relative;
  margin: 0.15rem 0;
}

.info-card .card-bg {
  width: 100%;
  height: 100%;
}

.info-card .people-info {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 0.25rem;
  box-sizing: border-box;
}

.info-card .people-info .title-status {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.12rem 0;
}

.info-card .people-info .title-status .title {
  font-size: 0.17rem;
  color: #ffffff;
  font-weight: 500;
}

.info-card .people-info .title-status .status {
  font-size: 0.12rem;
  color: #71aff9;
}

.info-card .people-info .general-information {
  font-size: 0.14rem;
  color: #ffffff;
  margin: 0.1rem 0;
}

.progress-details {
  width: 100%;
  margin-top: 0.1rem;
}

.progress-details .progress-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.progress-details .progress-title .title {
  font-size: 0.16rem;
  font-weight: bold;
}

.progress-details .progress-title .more-box {
  width: 0.17rem;
  height: 0.17rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.progress-details .progress-title .btn-content {
  width: 0.82rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  bottom: -0.6rem;
  right: 0;
  border-radius: 0.05rem;
  overflow: hidden;
  background: #efefef;
}
.progress-details .progress-title .btn-content .btn {
  width: 100%;
  height: 0.28rem;
  background: #bfbfbf;
  color: #ffffff;
  text-align: center;
  line-height: 0.28rem;
  font-size: 0.12rem;
}
.progress-details .progress-title .btn-content .withdraw {
  width: 100%;
  margin-top: 0.01rem;
}

.progress-details .progress-title .more-box > img {
  width: 0.17rem;
}

.progress-details .progress-content {
  width: 100%;
  margin-top: 0.1rem;
}

.progress-details .progress-content .progress {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 0.05rem;
}

.progress-details .progress-content .progress .progress-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.progress-details .progress-content .progress .progress-left .status-dian {
  width: 0.13rem;
  height: 0.13rem;
  margin-top: 0.04rem;
}
.progress-details .progress-content .progress .progress-left .status-quan {
  width: 0.13rem;
  height: 0.13rem;
  margin-top: 0.04rem;
  background: #d7d7d7;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.progress-details
  .progress-content
  .progress
  .progress-left
  .status-quan
  .nei-quan {
  width: 0.11rem;
  height: 0.11rem;
  background: #fff;
  border-radius: 50%;
}
.progress-details .progress-content .progress .progress-left .progress-line {
  margin-top: 0.08rem;
  height: 0.66rem;
}
.progress-details .progress-content .progress .progress-right {
  margin-left: 0.12rem;
}
.progress-details .progress-content .progress .progress-right .progress-status {
  font-size: 0.15rem;
  color: #2d2d2d;
}
.progress-details .progress-content .progress .progress-right .progress-date {
  font-size: 0.13rem;
  color: #bfbfbf;
  margin-top: 0.08rem;
}
.progress-details .progress-content .progress .progress-right .progress-tip {
  font-size: 0.13rem;
  color: #bfbfbf;
  margin-top: 0.08rem;
}
</style>
